<template>
  <div>
    <h2>Child...</h2>
    <p>{{ num }}</p>
    <!-- 不要直接修改prop数据，应该在父组件定义更新数据的方法，传递给子组件使用 -->
    <button @click="addNum">按钮</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  // 声明接受props
  // 将来props接受的数据都会挂载到this上，所以通过this直接使用
  // props: ["num"],
  props: {
    num: Number,
    addNum: Function,
  },
  // props: {
  //   num: {
  //     type: Number, // 类型
  //     default: 0, // 默认值
  //     required: true, // 必须的
  //     validator(num) {
  //       // 自定义校验规则
  //       return num >= 0 && num <= 10;
  //     },
  //   },
  // },
  mounted() {
    // 没有声明接受props的其他属性，会在$attrs上
    console.log(this.$attrs);
  },
};
</script>

<style></style>
